<template>
  <div class="app-md-editor">
    <md-editor v-model="text" :toolbars-exclude="['github']" @onHtmlChanged="saveHtml" @onChange="onChange" />
  </div>
</template>
<script setup lang="ts">
import MdEditor from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'

interface Props {
  value?: string
  placeholder?: string
  previewDebounce?: number
  maxLength?: number
}

const props = withDefaults(defineProps<Props>(), {
  maxLength: undefined,
  placeholder: '',
  previewDebounce: 200,
  uploadImages: undefined,
  value: '',
})
console.log('props', props)

const emit = defineEmits<{ (e: 'change', id: string): void; (e: 'update:modelValue', id: string): void }>()
const text = ref('')
// 处理变化
const onChange = (val: string) => {
  emit('change', val)
}

// 获取html
const saveHtml = (h: string) => {
  emit('update:modelValue', h)
}
</script>
<style lang="scss">
.app-md-editor {
  .md-editor {
    min-height: calc(100vh - 220px);
  }
}
</style>
